<template>
  <!-- 热词 -->
  <div>
    <div class="page-item-title">热词</div>
    <div id="hotWorld_police" style="width:874px;height:375px;"></div>
  </div>
</template>
<script>
/* import { getTopHotWord } from "@/api/dangers"; */
import { getAITopHotWord } from "@/api/record";
var Echarts = require("echarts/lib/echarts");
require("echarts-wordcloud");
export default {
  name: "AIVIdeoHotWords",
  data() {
    return {
      domStyle: {
        width: "874px",
        height: "375px"
      },
      hotWordList: []
    };
  },
  created() {},
  mounted() {},
  methods: {
    getData(parames) {
      let that = this;
      that.hotWordList = [];
      let parame = {
        topN: 20,
        orgIds: parames.orgIds,
        types: 2,
        startTime: parames.startTime,
        endTime: parames.endTime,
        alarmType: parames.alarmType
      };
      getAITopHotWord(parame).then(res => {
        if (res.status == 200) {
          that.hotWordList = res.data.map(function(item) {
            return {
              name: item.keyWord,
              value: item.score
            };
          });
          that.getWorld();
        }
      });
    },
    //词云
    getWorld() {
      let $dom = document.getElementById("hotWorld_police");
      $dom.style.width = this.domStyle.width;
      $dom.style.height = this.domStyle.height;
      let colorArr = [
        "#fb6873",
        "#fb547b",
        "#e750b7",
        "#7b50e7",
        "#507be7",
        "#50d7e7",
        "#5ee750",
        "#e7d350",
        "#e79750",
        "#e75050",
        "#ffa2a9",
        "#ffa2f5",
        "#b6a2ff",
        "#a2d2ff",
        "#a2ffba",
        "#feffa2",
        "#ffd2a2",
        "#f29b9b",
        "#ffc5a2",
        "#fac1fb",
        "#ba333d",
        "#ba3373",
        "#7933ba",
        "#338fba",
        "#33ba73",
        "#95ba33",
        "#ba9f33",
        "#ba7c33",
        "#ba5033",
        "#c8a9ac"
      ];
      if ($dom) {
        let option = {
          tooltip: {
            show: true,
            formatter: function(params) {
              let html = `<p><span style="display:inline-block;width:5px;
                height:5px;border-radius:50%;background-color:${params.color};margin-right:5px;vertical-align:middle"></span>${params.name}：共出现${params.value}次</p>`;
              return html;
            }
          },
          series: [
            {
              type: "wordCloud",
              gridSize: 50,
              sizeRange: [12, 55],
              rotationRange: [0, 0],
              shape: "pentagon",
              textStyle: {
                normal: {
                  color: function() {
                    return colorArr[
                      Math.floor(Math.random() * colorArr.length)
                    ];
                  }
                },
                emphasis: {
                  shadowBlur: 10,
                  shadowColor: "#333"
                }
              },
              data: this.hotWordList
            }
          ]
        };
        this.myChart = Echarts.init($dom);
        this.myChart.setOption(option);
      }
    }
  }
};
</script>
